<template>
  <div class="btm-right hw-box-style-flex" @click.stop="chageOns">
    <div class="btm-right-look hw-box-style-flex-r-center title1-active"> 
      <t-icon size="16" name="browse" style="color: #fff" class="icon-style title1-active"  v-if="info.browseTotal"></t-icon>
      <span v-if="info.browseTotal">{{ props.info.browseTotal }}</span> 
    </div>    
    <div class="right-box">      
      <div class="btm-right-title title1-active" @click.stop="starAdd">   
        <div class="star-parent">  
          <div class="star-parent-move" :class="{'move-box':moveShow}" > 
            <t-icon   
          size="18"     
          name="star-filled"         
          style="color: #fec53d"  
          class="icon-style title1-active"     
          v-if="props.info.isFollow"
        ></t-icon>
        <t-icon  size="18" name="star" style="color: #fff" class="icon-style title1-active" v-else></t-icon>
          </div>
        </div> 
        <span v-if="props.info.followTotal && props.info.followTotal>0">{{ props.info.followTotal }}</span>
      </div>
      <t-popup content="" placement="bottom">  
        <template #content> 
            <shear @shearType="shearType" size="24" style="color: rgba(0,0,0,.8)"/>
          </template>
      <div class="btm-right-title title1-active share-box" >
        <t-icon size="16" name="share" style="color: #fff" class="icon-style title1-active"></t-icon>
      </div>
       </t-popup> 
    </div> 
  </div> 
  <div class="mode-indexs">
    <messageModel
    submitText="前往"
    title="提示"
    :visible="visibleMessage1"
    problem="您暂未登录"
    message="是否前往登录？"
    @closeClick="closeClick"
    @submitClick="pathSubmitClick"
  />
  </div>
</template>

<script setup lang="ts">
import { useProjectStore } from '@/store';
import messageModel from '@/components/messageModel/index.vue';
import { getHeardToken } from '@/api/utils';
import { toQQzone, toQQ, toWeibo, toWechat } from '@/utils/shear';
import shear from '@/components/shear/shear.vue';
import {ref,defineExpose} from "vue"
import {useRouter} from "vue-router"
import { number } from 'echarts/core';
const emit=defineEmits(['starEmit'])

const store=useProjectStore()
const router=useRouter()
const moveShow=ref(false)
const timer=ref(null)
const visibleMessage1 = ref(false);
const props=defineProps({
  info:{ 
    type:Object
  }, 
  size:{  
    type:String 
  },
  shearUrl:{ 
    type:String 
  },
  index:{
    type:Number
  }
})
const chageOns=()=>{
  
}
const starAdd=()=>{ 
  let token = getHeardToken();  
  if (!token) { 
    store.setloginModeShow(true)
    // visibleMessage1.value = true; 
    return; 
  }
  
  emit('starEmit',props.index) 
  starCliCK()
} 
const starCliCK=()=>{  
  clearTimeout(timer.value)  
  moveShow.value=true
  // console.log('点赞',moveShow.value)
  timer.value=setTimeout(() => {
      moveShow.value=false
  }, 1100); 
} 
const closeClick = () => {
  //取消
  visibleMessage1.value = false;
};
const pathSubmitClick = () => { 
  //确认登陆

  visibleMessage1.value = false;
  router.push({path:"/login",query:{redirectType:2}})
  // let url = window.location.href;
  // window.location.href = redirectUrl;
};
const shearType = (e: number) => {
  let url =props.shearUrl?props.shearUrl: window.location.href;
   
  let title = props.info.name;
  switch (e) { 
    case 1:
      toQQzone(url, title);
      break;
    case 2:
      toQQ(url, title);
      break;
    case 3:
      toWeibo(url, title);
      break;
    default:
      toWechat(url, title);
      break;
  }
};  
defineExpose({
  starCliCK 
})
</script>

<style lang="less" scoped>
.btm-right {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 32px; 
  width: 100%;
  :deep(.t-icon){
    font-size: 18px !important;
  }
  // background: linear-gradient(180deg, rgba(0,0,0,.4) 100%, rgba(0,0,0,.0) 0%);
}
.btm-right-look {
  display: flex;
  align-items: center;
  justify-content: center;
   font-size: 16px;
  font-weight: 400; 
  color: #ffffff; 
  line-height: 24px;
  .icon-style {
    margin-right: 4px;
  }
}
.btm-right-title {
   display: flex;
  align-items: center;
  justify-content: center;
  padding: 0px 8px;
  height: 32px;
  font-size: 16px;
  font-weight: 400;
  color: #ffffff;
  line-height: 24px;
  background: rgba(4, 4, 4, 0.2);
  border-radius: 4px;
  backdrop-filter: blur(1px);
  span{ 
    margin-left: 4px; 
  }
  .star-parent{
  display: flex;
  align-items: center;
  width: 18px;
  height: 24px;
  .star-parent-move{
    display: flex;
    align-items: center;
     width: 18px;
  height: 24px;
  }
 
}
}
.hw-box-style-flex {
  margin: 0;
}
.btm-right-title:hover {
  background: rgba(4, 4, 4, 0.5);
  border-radius: 4px;
  backdrop-filter: blur(1px);
}
.right-box{
  display: flex;
  justify-content: flex-end;
}
.share-box{
  width: 32px;
  height: 32px;
  padding: 0;
  margin-left: 8px;
   .icon-style {
    margin-right: 0px;
  }
}
.move-box {
   
  animation: myanimation 1s 1; /* 添加 one 关键字 */
}

@keyframes myanimation {
  0% {
    transform: scale(1.4);
  } 
  50% { 
    transform: scale(.8); 
  }
  100% {
    transform: scale(1);
  }
}
:deep(.t-dialog__wrap){
 z-index: 9999 !important;
}
:deep(.t-dialog__ctx.t-dialog__ctx--fixed){
 z-index: 9999 !important;
}
.mode-indexs{
  position: fixed;
  z-index: 99999;
}
</style>